<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教学管理 - 教师面板</title>
  <link rel="stylesheet" href="./../../static/teacher/css/style.css">
  <script src="./../../static/teacher/js/teaching-management.js"></script>
</head>
<body>
  <header class="navbar">
    <div class="logo">TeacherPanel</div>
    <h1>教师控制面板</h1>
    <div class="user-info">
      <img src="teacher-avatar.jpg" alt="Teacher Avatar" class="avatar">
      <span>教师</span>
      <button class="logout-btn" onclick="logout()">退出</button>
    </div>
  </header>

  <aside class="sidebar">
    <ul>
      <li><a href="home.html">工作首页</a></li>
      <li><a href="course-management.html">课程管理</a></li>
      <li><a href="teaching-management.html">教学管理</a></li>
    </ul>
  </aside>

  <main>
    <section class="dashboard">
      <h2>教学管理</h2>

      <div class="teaching-class">
        <h3>教学班信息</h3>
        <table id="teaching-class-table">
          <thead>
            <tr>
              <th>教学班名称</th>
              <th>描述</th>
              <th>活动</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 动态插入教学班数据 -->
          </tbody>
        </table>
      </div>

      <div class="learning-units">
        <h3>学习单元管理</h3>
        <table id="learning-units-table">
          <thead>
            <tr>
              <th>学习单元名称</th>
              <th>状态</th>
              <th>关联课程</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 动态插入学习单元数据 -->
          </tbody>
        </table>
      </div>

      <div class="student-progress">
        <h3>学生学习进度</h3>
        <table id="student-progress-table">
          <thead>
            <tr>
              <th>学生姓名</th>
              <th>学习单元</th>
              <th>学习进度</th>
              <th>得分</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 动态插入学生学习进度数据 -->
          </tbody>
        </table>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p>© 2024 TeacherPanel, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
  </footer>

  <!-- 弹窗编辑教学班 -->
  <div id="edit-class-modal" class="modal">
    <div class="modal-content">
      <h3>编辑教学班</h3>
      <form id="edit-class-form">
        <label for="class-name">教学班名称：</label>
        <input type="text" id="class-name"><br>
        <label for="class-description">描述：</label>
        <textarea id="class-description"></textarea><br>
        <button type="submit">保存</button>
        <button type="button" onclick="closeEditClassModal()">取消</button>
      </form>
    </div>
  </div>


</body>
</html>
